import React, {Component} from 'react';
import {connect} from 'dva';
import Card from '../Card';
import styles from './index.less';
import VoucherItem from './VoucherItem';
/* eslint-disable */
class VoucherBalance extends Component {
  state = {
    imgList: [
      {
        itemIndex: '1',
        itemImg: 'rws-hotel',
        itemValue: styles.a1,
      },
      {
        itemIndex: '2',
        itemImg: 'rws-dishes',
        itemValue: styles.a2,
      },
      {
        itemIndex: '3',
        itemImg: 'rws-gift',
        itemValue: styles.a3,
      },
      {
        itemIndex: '4',
        itemImg: 'rws-ticket',
        itemValue: styles.a4,
      },
    ],
  };

  getImg = index => {
    const {imgList} = this.state;
    return imgList[index].itemImg;
  };

  numItem = (ele, index) => {
    const {hotelBookingSummarize} = this.props;
    if (index === 0 && hotelBookingSummarize !== undefined &&
      hotelBookingSummarize !== null && hotelBookingSummarize.campaigns !== undefined) {
      let count = 0;
      for (let i = 0; i < hotelBookingSummarize.campaigns.length; i += 1) {
        count += hotelBookingSummarize.campaigns[i].night;
      }
      return count;
    } else if (index === 0) {
      return 0;
    }
    return ele.count;
  };

  render() {
    const {imgList} = this.state;
    const {
      vouchers = [{"type": "Hotel", "count": "0"}, {"type": "F&B", "count": "1"}, {
        "type": "Gift",
        "count": "0"
      }, {"type": "Others", "count": "0"}], voucherLoadingFlag
    } = this.props;

    return (
        <Card height="103px" title="VOUCHER BALANCE">
          <div className={styles.voucherBox}>
            {vouchers.map((ele, index) => (
              <VoucherItem
                imgIndex={imgList[index].itemIndex}
                imgBg={imgList[index].itemValue}
                imgItem={this.getImg(index)}
                numItem={this.numItem(ele, index)}
                typeItem={ele.type}
                key={index}
              />
            ))}
          </div>
        </Card>
    );
  }
}

export default VoucherBalance;
